<template>
	<view class="content">
		<view class="part1">
			<view class="my-order">
				<view class="sort navIndex==1?'activite': ''" @click="checkIndex(1)">
					关注
				</view>
				<view class="sort navIndex==2?'activite': ''" @click="checkIndex(2)">
					推荐
				</view>
				<view class="sort navIndex==3?'activite': ''" @click="checkIndex(3)">
					同城
				</view>
			</view>
		</view>
		<view class="part2">
			<view class="content" v-if="navIndex==1">
				<!-- 关注搜索框 -->
				<navigator>
					<view class="top-search">
						<view class="search-right">
							<uni-icons type="search" size="14" class="icons1"></uni-icons>
							<input type="text" value="" placeholder="想要发什么？" />
							<text @click="searchs" class="sousuos">搜索</text>
						</view>
					</view>
				</navigator>
				<!-- 关注内容 -->
				<view class="attention">
					<view class="attention-content" @click="goLoin" v-for="(item3, id) in attention" :key="id">
						<view class="attention-content-title">
							<view class="attention-content-title-img">
								<image :src="item3.image1" mode=""></image>
							</view>
							<view class="attention-content-title-name">
								<view class="attention-content-title-name1">
									{{item3.name}}
								</view>
								<view class="attention-content-title-name2">
									{{item3.order}}
								</view>
							</view>
						</view>
						<view class="attention-content-imgs">
							<view class="attention-content-imgs1">
								<image :src="item3.imgs1" mode=""></image>
							</view>
							<view class="attention-content-imgs1">
								<image :src="item3.imgs1" mode=""></image>
							</view>
							<view class="attention-content-imgs1">
								<image :src="item3.imgs1" mode=""></image>
							</view>
						</view>
						<view class="attention-content-jia">
							<view class="attention-content-jia1">{{item3.ordermoney}}</view>
							<view class="attention-content-jia1">{{item3.ordermoney}}</view>
							<view class="attention-content-jia1">{{item3.ordermoney}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content" v-if="navIndex==2">
				<!-- 搜索框 -->
				<navigator>
					<view class="top-search">
						<view class="search-right">
							<uni-icons type="search" size="14" class="icons1"></uni-icons>
							<input type="text" value="" placeholder="想要发什么？" />
							<text @click="searchs" class="sousuos">搜索</text>
						</view>
					</view>
				</navigator>
				<!-- <van-search v-model="value" placeholder="请输入搜索关键词" /> -->

				<!-- banner -->
				<view class="banner">
					<image src="../../static/home/banner.jpg" mode=""></image>
				</view>
				<!-- 商品 -->
				<view class="mall">
					<view class="mall-title">每日特价
						<uni-icons type="arrowright" size="13" margin-left="14rpx"></uni-icons>
					</view>

					<view class="mall-content" @click="goCommodity" v-for="(item, id) in names" :key="id">
						<view class="content-left">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="content-right">
							<view class="container--right-top">
								{{item.title}}
								<view class="container--right-middle">
									{{item.middle}}
								</view>
							</view>
							<view class="content-right-bottom">
								{{item.money}}
							</view>
						</view>
					</view>
				</view>
				<!-- 商品 -->
				<view class="mall">
					<view class="mall-title">置换闲置物品首选
						<uni-icons type="arrowright" size="13" margin-left="14rpx"></uni-icons>
					</view>

					<view class="mall-content" @click="goCommodity" v-for="(item, id) in names" :key="id">
						<view class="content-left">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="content-right">
							<view class="container--right-top">
								{{item.title}}
								<view class="container--right-middle">
									{{item.middle}}
								</view>
							</view>
							<view class="content-right-bottom">
								{{item.money}}
							</view>
						</view>
					</view>
				</view>
				<!-- 分类 -->
				<view class="classify-title">
					<!-- 分类 -->
					<view class="local-title">
						<view class="search_criterias">
							<text v-for="(item,index) in search_criteria"
								:class="['selectno',item.selects==true ? 'selectActive':'']"
								@click="searchcriteria(index, item.name)">{{item.name}}</text>
						</view>
						<view style="width: 15%; margin: auto; margin-bottom: 20px; border: 0; font-size: 21rpx;">
							<uni-combox class="select_member" placeholder="全部成员" emptyTips="未查到" :candidates="list" @input='goInput'>
							</uni-combox>

						</view>
					</view>
				</view>
				<view class="classify">
					<view class="classify-content" v-for="(item2, id) in commodity" :key='id' @click="goCommodity">
						<view class="classify-content-img">
							<image :src="item2.image" mode=""></image>
						</view>
						<view class="classify-content-name">
							{{item2.title}}
						</view>
						<view class="classify-content-jia">
							{{item2.money}}
						</view>
						<view class="classify-content-yh">
							<view class="classify-content-yh1">
								<image :src="item2.userimage" mode=""></image>
							</view>
							<view class="">
								{{item2.user}}
							</view>
						</view>
					</view>

				</view>
<!-- 
				<view class="mall-content" @click="goCommodity" v-for="(item, id) in names" :key="id">
					<view class="content-left">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="content-right">
						<view class="container--right-top">
							{{item.title}}
							<view class="container--right-middle">
								{{item.middle}}
							</view>
						</view>
						<view class="content-right-bottom">
							{{item.money}}
						</view>
					</view>
				</view> -->
			</view>

		</view>
		<view class="content" v-if="navIndex==3">
		<!-- 搜索框 -->
						<navigator>
							<view class="top-search">
								<view class="search-right">
									<uni-icons type="search" size="14" class="icons1"></uni-icons>
									<input type="text" value="" placeholder="想要发什么？？" />
									<text @click="searchs" class="sousuos">搜索</text>
								</view>
							</view>
						</navigator>
						<!-- banner -->
						<view class="local-banner" @click="goGoods">
							<image src="../../static/home/tc-imgs1.png"></image>
						</view>
						<!-- 分类 -->
						<view class="classify-title">
							<!-- 分类 -->
							<view class="local-title">
								<view class="search_criterias">
									<text v-for="(item,index) in search_criteria"
										:class="['selectno',item.selects==true ? 'selectActive':'']"
										@click="searchcriteria(index)">{{item.name}}</text>
								</view>
								<view style="width: 15%; margin: auto; margin-bottom: 20px; border: 0;">
									<xfl-select :list="list" :clearable="false" :showItemNum="3" :listShow="false"
										:isCanInput="true" :style_Container="'height: 30px; font-size: 12px;'"
										:placeholder="'placeholder'" :initValue="'商品'" :selectHideType="'hideAll'">
									</xfl-select>
								</view>
							</view>
						</view>
						<view class="classify" @click="goDetails">
							<view class="classify-content" v-for="(item2, id) in jishou2" :key='id' @longpress="logoTime">
								<view class="classify-content-img">
									<image :src="item2.waresImgs[0]" mode=""></image>
								</view>
								<view class="classify-content-name">
									{{item2.waresContent}}
								</view>
								<view class="classify-content-jia">
									{{item2.waresPrice}}
								</view>
								<view class="classify-content-yh">
									<view class="classify-content-yh1">
										<image :src="item2.waresImgs[0]" mode=""></image>
									</view>
									<view class="">
										{{item2.categoryName}}
									</view>
								</view>
							</view>
						</view>
		</view>
	</view>

	</view>
</template>
<script>
	import vanSearch from '../../wxcomponents/vant/search/index.js'
	export default {
		data() {
			return {
				waresPrice:'',// 寄售商品价格
				jswaresId:'',// 寄售商品ID
				commodityName:'',// 商品名称
				state:'',// 状态（上架、下架
				jishou2:'',
				value: '',
				navIndex: 2,
				cityCode:'',//城市编码
				parentCategoryId:'',//分类ID（父类）
				categoryId:'',//分类ID（子类）
				list: [ //要展示的数据
					'商品',
					// {value: '香蕉', disabled: true},
					'寄售',
					'易物'
				],
				search_criteria: [{
						"name": '全部',
						"selects": true
					},
					{
						"name": '皮草',
						"selects": false
					},
					{
						"name": '模型',
						"selects": false
					},
					{
						"name": 'Cosplay',
						"selects": false
					},
					{
						"name": '手办',
						"selects": false
					},
					{
						"name": '全部成员',
						"selects": false
					},
				],
				pages: 0,
				enterprise: false,
				revenue: false,
				titles: '成员详情',
				
				names: [{
						'id': '0',
						'title': '【支持win7】联想ThinkPad E15 15.6英寸高端轻薄商务办公游戏ibm笔记本电脑i7- 10710U 16G 512G+1T@定制6DCD',
						'middle': '顺丰包邮',
						image: '../../static/home/home-imgs1.png',
						'money': '￥ 7399.00'
					},
					{
						'id': '1',
						'title': '支持win7】联想ThinkPad E15 15.6英寸高端轻薄商务办公游戏ibm笔记本电脑',
						'middle': '商品分类2',
						image: '../../static/home/home-imgs2.png',
						'money': '￥ 2839.92'
					}
				],
				commodity: [{
						'id': '0',
						'title': 'Lenovo/联想 TS80X 小型静音4U塔式 服务器主机',
						image: '../../static/home/home-imgs3.png',
						userimage: '../../static/mall/mall8.png',
						'money': '￥2839.92',
						'user': '日向雏田'
					},
					{
						'id': '1',
						'title': '一加/OnePlus 9Pro系列手机 一加丨哈苏 手机影像系统 一加/OnePlus 9',
						image: '../../static/home/home-imgs4.png',
						userimage: '../../static/mall/mall8.png',
						'money': '￥2839.92',
						'user': '漩涡鸣人'
					}, {
						'id': '2',
						'title': '3这里是商品标题这里是商品标题这里是商品标题...',
						image: '../../static/home/home-imgs1.png',
						userimage: '../../static/mall/mall8.png',
						'money': '￥2839.92',
						'user': '月光疾风'
					},
					{
						'id': '3',
						'title': '4这里是商品标题这里是商品标题这里是商品标题...',
						image: '../../static/home/home-imgs1.png',
						userimage: '../../static/mall/mall8.png',
						'money': '￥2839.92',
						'user': '神月出云'
					}
				],
				attention: [{
						'id': '0',
						image1: '../../static/home/gz-imgs1.png',
						'name': '驴打滚1',
						'order': '18.2w粉丝',
						'imgs1': '../../static/home/gz-imgs2.png',
						'ordermoney': '￥2839.92'
					},
					{
						'id': '1',
						image1: '../../static/home/gz-imgs1.png',
						'name': '山东碉堡建设制造二分厂2',
						'order': '18.2w粉丝',
						'imgs1': '../../static/home/gz-imgs21.png',
						'ordermoney': '￥2839.92'
					},
					{
						'id': '2',
						image1: '../../static/home/ss-imgs6.png',
						'name': '驴打滚3',
						'order': '18.2w粉丝',
						'imgs1': '../../static/home/gz-imgs22.png',
						'ordermoney': '￥2839.92'
					},
				],
			    lists2:[],// 后台商品列表
			};
		},
		onShow() {
			console.log('---------1111')
				// this.goLoginto()
		},
		onLoad() {
			this.dianPing()
			this.zhengShi()
		},
		methods: {
			goDetails() {
			uni.navigateTo({
				url:'../addition/consignment-details?waresId='+this.jswaresId + '&waresPrice='+ this.waresPrice
			})
			},
			//正式商品列表
			zhengShi() {
				var that = this
				that.$http.req.ajax({
				     path: ':8069/web/mall/commodityList',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				     data: {
						 commodityName:'',
				    pageNum:'1',//页数
					 pageSize:'5',//	每页显示条数
					 commodityType:''
					 
				     },
				     afterAjax: (res) => {
						 		console.log(res,'正式商品列表列表接口')
						 		if (res.code !== 200) {
						 			console.log(res.data,'正式商品列表接口错误')
						 		}
						 		if (res.code == 200) {
						 			console.log(res,'正式商品列表通了')
									that.lists2 = res.data[0]
									console.log(that.lists2,'********')
									uni.showToast({
										title: '拿到商品列表',
										icon: 'none'
									})
						 		}
				     }
				    })
			},
			//寄售商品列表
			dianPing() {
				var that = this
				that.$http.req.ajax({
				     path: ':8090/web/idleWares/idleWaresList',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				     data: {
				    pageNum:'1',//页数
					 pageSize:'10',//	每页显示条数
					 waresType:'1',//寄售类型（1免费2付费）
					 cityCode:'0531',//城市编码
					 parentCategoryId:'1',//分类ID（父类）
					 categoryId:'15',//分类ID（子类）
					 
				     },
				     afterAjax: (res) => {
						 		console.log(res,'寄售商品列表接口')
						 		if (res.code !== 200) {
						 			console.log(res.data,'寄售商品列表接口错误')
						 		}
						 		if (res.code == 200) {
						 			console.log(res,'寄售商品列表通了')
									that.jishou2 = res.data
									that.jswaresId = res.data[0].waresId
									that.waresPrice = res.data[0].waresPrice
									console.log(that.jswaresId,'6.15')
									uni.showToast({
										title: '',
										icon: 'none'
									})
						 		}
				     }
				    })
			},
			// 点击切换全部等列表
			searchcriteria(i, name) {
				console.log(i, '22222222')
				this.search_criteria.forEach((el, index) => {
					if (index == i) {
						el.selects = true
						// console.log(index)
					} else {
						el.selects = false
					}
				})
				if(name == '寄售') {
					console.log('-------777')
				}
			},
			goInput(e) {
				console.log(e)
				if(e == '寄售'){
					console.log('等于')
					this.dianPing()
				}
			},
			// goLoginto() {
			// 	setTimeout(function() {
			// 		if (uni.getStorageSync('token') == '') {
			// 			uni.showToast({
			// 				// title: '暂未登陆,快去登陆吧！',
			// 				// title:'',
			// 				icon: 'none'
			// 			})
			// 			uni.navigateTo({
			// 				// url: "../login/login"
			// 			})
			// 		}
			// 	}, 1000)
			// },
			searchs() {
				uni.navigateTo({
						url: 'search/search'
					}) 
			},
	logoTime() {
			console.log('7998')
		},
		checkIndex(index) {
			this.navIndex = index
		},
		goLoin() {
			uni.navigateTo({
				url: '../login/login'
			})
		},
		goGoods() {
			uni.navigateTo({
				url: 'specific/goods'
			})
		},
		goCommodity() {
			uni.navigateTo({
				url: '../commodity-details/commodity-details?waresId='+this.jswaresId
			})
		},
	}
	}
</script>
<style lang="scss">
	.content {
		.top-search {
			width: 100%;
			margin: 18rpx 25rpx;
			color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;


			.search-right {
				// background: #f5f5f5 url('../../static/search.png') no-repeat 25rpx 25rpx;
				font-size: 25rpx;
				background-size: 25rpx 25rpx;
				width: 699rpx;
				height: 72rpx;
				border: 2px solid #fcda22;
				border-radius: 36rpx 36rpx 36rpx 36rpx;

				.icons1 {
					position: absolute;
					margin: 23rpx 25rpx;
				}

				input {
					width: 380rpx;
					text-align: left;
					margin-left: 69rpx;
					margin-top: 18rpx;
					font-size: 25rpx;
					float: left;
					color: #000000;
				}

				.sousuos {
					width: 123rpx;
					height: 72rpx;
					background: #FCDA22;
					opacity: 1;
					border-radius: 0px 23rpx 23rpx 0px;
					float: right;
					font-size: 25rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 72rpx;
					color: #21201D;
					opacity: 1;
					text-align: center;
				}
			}
		}
		// 切换tab栏
		.part1 {
			width: 679rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.my-order {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
			}
		}

		// banner
		.banner {
			width: 700rpx;
			margin: 21rpx 25rpx;
			height: 293rpx;
			border-radius: 16rpx;
			background-color: #eaeaea;

			image {
				width: 700rpx;
				height: 293rpx;
			}

		}

		// 商品内容
		.mall {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin: 25rpx 25rpx;

			.mall-title {
				font-size: 28rpx;
				font-weight: 600;
				margin: 0 0 18rpx 0;

			}

			.mall-content {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 18rpx;
				margin-bottom: 18rpx;
				margin-right: 25rpx;

				.content-left {
					width: 231rpx;
					height: 231rpx;
					background-color: #eaeaea;
					border-radius: 14rpx;

					image {
						max-width: 100%;
						max-height: 100%;
					}
				}

				.content-right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 28rpx;
					margin-right: 25rpx;

					.container--right-top {
						font-size: 25rpx;
						font-weight: Medium;
					}

					.container--right-middle {
						margin-top: 14rpx;
						font-size: 18rpx;
						color: #21202d;
					}

					.content-right-bottom {
						font-size: 25rpx;
						color: #eb3e3e;
						font-weight: Medium;
					}
				}
			}
		}

		// 分类

		.classify-title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 19rpx 24rpx;

			.classify-title1,
			.classify-title2 {
				font-size: 21rpx;
				color: #21201d;
				padding: 9rpx 27rpx;
				background-color: #F5F5F5;
				line-height: 50rpx;
				align-items: center;
				border-radius: 27rpx;
			}

			.classify-title2 {
				background-color: #fcca22;
			}
		}

		// 分类内容
		.classify {
			flex-wrap: wrap;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 18rpx 25rpx;

			.classify-content {
				width: 333rpx;
				margin-top: 18rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.classify-content-img {
					width: 333rpx;
					height: 333rpx;

					image {
						max-width: 100%;
						height: 100%;

					}
				}

				.classify-content-name {
					margin: 18rpx;
					font-size: 25rpx;
					font-weight: Medium;

				}

				.classify-content-jia {
					margin: 18rpx;
					font-size: 25rpx;
					color: #eb3e3e;
				}

				.classify-content-yh {
					display: flex;
					flex-direction: row;
					justify-content: left;
					font-size: 18rpx;
					color: #20212d;

					.classify-content-yh1 {
						margin-right: 14rpx;
						width: 36rpx;
						height: 36rpx;

						image {
							max-width: 100%;
							max-height: 100%;
						}
					}
				}
			}
		}

	}

	// 关注页面
	.attention {
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.attention-content {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.attention-content-title {
				display: flex;
				flex-direction: row;
				justify-content: left;
				margin: 25rpx 18rpx 21rpx 25rpx;

				.attention-content-title-img {
					width: 79rpx;
					height: 79rpx;
					margin-right: 18rpx;

					image {
						max-width: 100%;
						max-height: 100%;
					}
				}

				.attention-content-title-name {
					flex-direction: column;

					.attention-content-title-name1 {
						font-size: 25rpx;
						color: #21202d;
						font-weight: 600;
					}

					.attention-content-title-name2 {
						margin-top: 12rpx;
						font-size: 21rpx;
						color: #949494;
					}
				}
			}

			.attention-content-imgs {
				margin: 21rpx 28rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.attention-content-imgs1 {
					width: 221rpx;
					height: 221rpx;
					flex-wrap: wrap;

					image {
						max-width: 100%;
						max-height: 100%;

					}
				}
			}

			.attention-content-jia {
				margin: 4rpx 25rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;

				.attention-content-jia1 {
					margin-right: 124rpx;
					font-size: 25rpx;
					color: #eb3e3e;
					font-weight: 600;
				}
			}
		}
	}

	// 同城内容
	.local-banner {
		width: 699rpx;
		height: 186rpx;
		margin: 39rpx 25rpx 63rpx 25rpx;
		// display: flex;
		// flex-direction: row;
		// justify-content: space-between;
		// margin: 83rpx 25rpx;

		image {
			width: 700rpx;
			max-height: 100%;
			border-radius: 14rpx;

		}
	}

	.local-title {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		width: 722rpx;
		height: 90rpx;

		.local-title1 {
			width: 97rpx;
			height: 50rpx;
			font-size: 21rpx;
			align-items: center;
			border-radius: 36rpx;
			background-color: #e5e5e5;
			text-align: center;
		}

		.local-title2 {
			width: 97rpx;
			height: 50rpx;
			font-size: 21rpx;
			align-items: center;
			border-radius: 36rpx;
			background-color: #fcca22;
			text-align: center;

		}

		// 1111
		.local-title {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			width: 722rpx;
			height: 90rpx;
			margin-top: 41rpx;
			margin-bottom: 41rpx;

		}

		.list_time {
			width: 100%;
			height: 141rpx;
			font-size: 21rpx;
			color: #21201D;
		}

		.list_times {
			height: 99rpx
		}

		.list_time .uni-combox__input {
			font-size: 21rpx;
		}

		.transparents {
			color: transparent;
		}

		.search_criterias {
			width: 538rpx;
			margin-top: 10rpx;
			margin-left: 25rpx;
			overflow: scroll;
			white-space: nowrap;
			height: 50rpx;
			float: left;
		}

		.search_criterias text {
			padding: 9rpx 25rpx;
			font-size: 21rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #21201D;
			border: 1px solid #EEEEEE;
			border-radius: 47rpx;
			opacity: 1;
			margin-right: 18rpx;
		}

		.selectActive {
			background: #FFDC1D;
		}

		.select_member {
			width: 121rpx;
			height: 80rpx;
			font-size: 28rpx;
			font-weight: 700;
			color: #000000;
			float: right;
			margin-top: 1rpx;
		}

	}
</style>


